<!DOCTYPE html>
<html lang="en">

<!-- Head tag -->
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Description-->
    
        <meta name="description" content="123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798">
    

    <!--Author-->
    
        <meta name="author" content="John Doe">
    

    <!--Open Graph Title-->
    
        <meta property="og:title" content="移动端轮播图"/>
    

    <!--Open Graph Description-->
    

    <!--Open Graph Site Name-->
    <meta property="og:site_name" content="Hexo"/>

    <!--Type page-->
    
        <meta property="og:type" content="article" />
    

    <!--Page Cover-->
    

        <meta name="twitter:card" content="summary" />
    

    <!-- Title -->
    
    <title>移动端轮播图 - Hexo</title>

    <!-- Bootstrap Core CSS -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/style.css">

    <!-- Custom Fonts -->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
    <link href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Gallery -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/featherlight/1.3.5/featherlight.min.css" type="text/css" rel="stylesheet" />

    <!-- Google Analytics -->
    


    <!-- favicon -->
    
	
</head>


<body>

    <!-- Menu -->
    <!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">逐风</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                
                    <li>
                        <a href="/">
                            
                                Home
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="/archives">
                            
                                Archives
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="/tags">
                            
                                Tags
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="/categories">
                            
                                Categories
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="https://github.com/klugjo/hexo-theme-clean-blog">
                            
                                <i class="fa fa-github fa-stack-2x"></i>
                            
                        </a>
                    </li>
                
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

    <!-- Main Content -->
    <!-- Page Header -->
<!-- Set your background image for this header in your post front-matter: cover -->

<header class="intro-header" style="background-image: url('http://www.codeblocq.com/assets/projects/hexo-theme-clean-blog/img/home-bg.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="post-heading">
                    <h1>移动端轮播图</h1>
                    
                    <span class="meta">
                        <!-- Date and Author -->
                        
                        
                            2017-01-20
                        
                    </span>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Post Content -->
<article>
    <div class="container">
        <div class="row">

            <!-- Tags and categories -->
           

            <!-- Gallery -->
            

            <!-- Post Main Content -->
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div><div class="line">92</div><div class="line">93</div><div class="line">94</div><div class="line">95</div><div class="line">96</div><div class="line">97</div><div class="line">98</div><div class="line">99</div><div class="line">100</div><div class="line">101</div><div class="line">102</div><div class="line">103</div><div class="line">104</div><div class="line">105</div><div class="line">106</div><div class="line">107</div><div class="line">108</div><div class="line">109</div><div class="line">110</div><div class="line">111</div><div class="line">112</div><div class="line">113</div><div class="line">114</div><div class="line">115</div><div class="line">116</div><div class="line">117</div><div class="line">118</div><div class="line">119</div><div class="line">120</div><div class="line">121</div><div class="line">122</div><div class="line">123</div><div class="line">124</div><div class="line">125</div><div class="line">126</div><div class="line">127</div><div class="line">128</div><div class="line">129</div><div class="line">130</div><div class="line">131</div><div class="line">132</div><div class="line">133</div><div class="line">134</div><div class="line">135</div><div class="line">136</div><div class="line">137</div><div class="line">138</div><div class="line">139</div><div class="line">140</div><div class="line">141</div><div class="line">142</div><div class="line">143</div><div class="line">144</div><div class="line">145</div><div class="line">146</div><div class="line">147</div><div class="line">148</div><div class="line">149</div><div class="line">150</div><div class="line">151</div><div class="line">152</div><div class="line">153</div><div class="line">154</div><div class="line">155</div><div class="line">156</div><div class="line">157</div><div class="line">158</div><div class="line">159</div><div class="line">160</div><div class="line">161</div><div class="line">162</div><div class="line">163</div><div class="line">164</div><div class="line">165</div><div class="line">166</div><div class="line">167</div><div class="line">168</div><div class="line">169</div><div class="line">170</div><div class="line">171</div><div class="line">172</div><div class="line">173</div><div class="line">174</div><div class="line">175</div><div class="line">176</div><div class="line">177</div><div class="line">178</div><div class="line">179</div><div class="line">180</div><div class="line">181</div><div class="line">182</div><div class="line">183</div><div class="line">184</div><div class="line">185</div><div class="line">186</div><div class="line">187</div><div class="line">188</div><div class="line">189</div><div class="line">190</div><div class="line">191</div><div class="line">192</div><div class="line">193</div></pre></td><td class="code"><pre><div class="line">&lt;!DOCTYPE html&gt;</div><div class="line">&lt;html lang=&quot;en&quot;&gt;</div><div class="line">&lt;head&gt;</div><div class="line">  &lt;meta charset=&quot;utf-8&quot;&gt;</div><div class="line">  &lt;meta name=&quot;viewport&quot;</div><div class="line">        content=&quot;width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0&quot;&gt;</div><div class="line">  &lt;style&gt;</div><div class="line"></div><div class="line">    * &#123;</div><div class="line">      margin: 0;</div><div class="line">      padding: 0;</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    ul, ol &#123;</div><div class="line">      list-style: none;</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    a &#123;</div><div class="line">      text-decoration: none;</div><div class="line">      color: black;</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    h2 &#123;</div><div class="line">      margin-top: 20px;</div><div class="line">      font-size: 17px;</div><div class="line">      text-align: center;</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    /* *************轮播图 */</div><div class="line"></div><div class="line">    #lbt &#123;</div><div class="line">      position: relative;</div><div class="line">      width: 100%;</div><div class="line">      height: 200px;</div><div class="line">      overflow: hidden;</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    #lbt ul &#123;</div><div class="line">      position: absolute;</div><div class="line">      width: 500%;</div><div class="line">      /* 不能是left,应该是translate */</div><div class="line">      transform: translateX(-20%);</div><div class="line">      transition: all 0.2s;</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    #lbt ul li &#123;</div><div class="line">      float: left;</div><div class="line">      width: 20%;</div><div class="line">      /*     transition: all 0.2s linear;</div><div class="line">       */</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    #lbt ol &#123;</div><div class="line">      position: absolute;</div><div class="line">      bottom: 10px;</div><div class="line">      left: 50%;</div><div class="line">      margin-left: -50px;</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    #lbt ol li &#123;</div><div class="line">      float: left;</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    #lbt ol li + li &#123;</div><div class="line">      margin-left: 8px;</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    #lbt ol li &#123;</div><div class="line">      display: block;</div><div class="line">      width: 16px;</div><div class="line">      height: 16px;</div><div class="line">      background: blue;</div><div class="line">      border-radius: 8px;</div><div class="line">      opacity: .5;</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    #lbt ol .current &#123;</div><div class="line">      background: red;</div><div class="line">    &#125;</div><div class="line">  &lt;/style&gt;</div><div class="line">  &lt;title&gt;移动端轮播图&lt;/title&gt;</div><div class="line">&lt;/head&gt;</div><div class="line">&lt;body&gt;</div><div class="line">&lt;!-- ******************移动端轮播图 --&gt;</div><div class="line">&lt;h2&gt;移动端轮播图&lt;/h2&gt;&lt;br&gt;</div><div class="line">&lt;section id=&quot;lbt&quot;&gt;</div><div class="line">  &lt;ul&gt;</div><div class="line">    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;img/3.jpg&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/li&gt;</div><div class="line">    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;img/1.jpg&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/li&gt;</div><div class="line">    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;img/2.jpg&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/li&gt;</div><div class="line">    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;img/3.jpg&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/li&gt;</div><div class="line">    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;img/1.jpg&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/li&gt;</div><div class="line">  &lt;/ul&gt;</div><div class="line">  &lt;ol&gt;</div><div class="line">    &lt;li class=&quot;current&quot;&gt;&lt;/li&gt;</div><div class="line">    &lt;li&gt;&lt;/li&gt;</div><div class="line">    &lt;li&gt;&lt;/li&gt;</div><div class="line">  &lt;/ol&gt;</div><div class="line">&lt;/section&gt;</div><div class="line">&lt;script&gt;</div><div class="line">  /*</div><div class="line">   * 1.自动滚动  （无缝的滚动，无缝的滑动）     定时器  过渡</div><div class="line">   * 2.点对应改变   根据当前图片的索引          类操作api</div><div class="line">   * 3.滑动功能     图片盒子根据手机移动做定位   touch事件  转换 translateX</div><div class="line">   * 4.吸附效果     当移动的距离不够的时候       过渡的形式回到原定位</div><div class="line">   * 5.切换效果     上一张  下一张   当移动的距离足够的时候   过渡的形式 超过宽度的1/3</div><div class="line">   * */</div><div class="line">  var box = document.querySelector(&apos;#lbt ul&apos;);</div><div class="line">  //var width=  $(&apos;#lbt&apos;)[0].offsetWidth;</div><div class="line">  var width = document.querySelector(&apos;#lbt&apos;).offsetWidth;</div><div class="line">  var lis = document.querySelectorAll(&apos;#lbt ul li&apos;).length;</div><div class="line">  var olis = document.querySelectorAll(&apos;#lbt ol li&apos;);</div><div class="line">  var pie = 1;</div><div class="line">  var gunDong = function () &#123;</div><div class="line">    //设置无缝滚动</div><div class="line">    pie++;</div><div class="line">    //  因此需要重新添加过度</div><div class="line">    box.style.transition = &apos;all 0.2s&apos;;</div><div class="line">    box.style.transform = &apos;translateX(&apos; + width * -pie + &apos;px)&apos;;</div><div class="line">  &#125;</div><div class="line">  var timed = setInterval(gunDong, 3000);</div><div class="line"></div><div class="line">  box.addEventListener(&apos;transitionend&apos;, function () &#123;</div><div class="line">    if (pie &gt;= lis - 1) &#123;</div><div class="line">      pie = 1;</div><div class="line">      //所有过度被移除</div><div class="line">      box.style.transition = &apos;none&apos;;</div><div class="line">      box.style.webkitTransition = &apos;none&apos;;</div><div class="line">      box.style.transform = &apos;translateX(&apos; + width * -pie + &apos;px)&apos;;</div><div class="line">    &#125;</div><div class="line">    //虽然没有点击左按钮改变图片了，但是</div><div class="line">    //手指右滑也要改变图片，所以。。。</div><div class="line">    else if (pie &lt;= 0) &#123;</div><div class="line">      //最后一张图片已经在第一张了，所有-2</div><div class="line">      pie = lis - 2;</div><div class="line">      box.style.transition = &apos;none&apos;;</div><div class="line">      box.style.webkitTransition = &apos;none&apos;;</div><div class="line">      box.style.transform = &apos;translateX(&apos; + width * -pie + &apos;px)&apos;;</div><div class="line">    &#125;</div><div class="line">    // 设置点的改变</div><div class="line">    for (var i = 0; i &lt; olis.length; i++) &#123;</div><div class="line">      olis[i].removeAttribute(&apos;class&apos;)</div><div class="line">    &#125;</div><div class="line">    ;</div><div class="line">    olis[pie - 1].className = &apos;current&apos;;</div><div class="line">  &#125;);</div><div class="line">  //滑动功能     图片盒子根据手机移动做定位   touch事件  转换 translateX</div><div class="line"></div><div class="line">  var isMove = false;</div><div class="line">  var start = 0;</div><div class="line">  var distance = 0;</div><div class="line">  box.addEventListener(&apos;touchstart&apos;, function (e) &#123;</div><div class="line">    clearInterval(timed);</div><div class="line">    start = e.touches[0].clientX;</div><div class="line">  &#125;);</div><div class="line">  box.addEventListener(&apos;touchmove&apos;, function (e) &#123;</div><div class="line">    isMove = true;</div><div class="line">    var move = e.touches[0].clientX;</div><div class="line">    distance = move - start;</div><div class="line">    // 手指移动时图也动</div><div class="line">    box.style.transform = &apos;translateX(&apos; + (width * -pie + distance) + &apos;px)&apos;;</div><div class="line">  &#125;);</div><div class="line">  box.addEventListener(&apos;touchend&apos;, function (e) &#123;</div><div class="line">    // timed=setInterval(gunDong, 1000);</div><div class="line">    if (isMove) &#123;</div><div class="line">      if (Math.abs(distance) &gt; width / 4) &#123;</div><div class="line">        if (distance &gt; 0) &#123;</div><div class="line">          pie--;</div><div class="line">          //  box.style.transition=&apos;all 0.2s&apos;;</div><div class="line">          // box.style.transform= &apos;translateX(&apos;+width*(-pie-1)+&apos;px)&apos;;</div><div class="line">        &#125; else &#123;</div><div class="line">          pie++;</div><div class="line">          // box.style.transition=&apos;all 0.2s&apos;;</div><div class="line">          // box.style.transform= &apos;translateX(&apos;+width*(-pie+1)+&apos;px)&apos;;</div><div class="line">        &#125;</div><div class="line">        box.style.transition = &apos;all 0.2s&apos;;</div><div class="line">        box.style.transform = &apos;translateX(&apos; + width * -pie + &apos;px)&apos;;</div><div class="line">      &#125;</div><div class="line">      else &#123;</div><div class="line">        box.style.transition = &apos;all 0.2s&apos;;</div><div class="line">        box.style.transform = &apos;translateX(&apos; + width * -pie + &apos;px)&apos;;</div><div class="line">      &#125;</div><div class="line">    &#125;</div><div class="line">    ;</div><div class="line">    //     var isMove=false;</div><div class="line">    // var start=0;</div><div class="line">    // var distance=0;</div><div class="line">    //  clearInterval(timed);</div><div class="line">    // timed=setInterval(gunDong, 3000); </div><div class="line">  &#125;);</div><div class="line">&lt;/script&gt;</div><div class="line">&lt;/body&gt;</div><div class="line">&lt;/html&gt;</div></pre></td></tr></table></figure>

                
            </div>

            <!-- Comments -->
            
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    


                </div>
            
        </div>
    </div>
</article>

    <!-- Footer -->
    <hr />

<!-- Footer -->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <ul class="list-inline text-center">
                    

                    

                    
                        <li>
                            <a href="https://github.com/klugjo/hexo-theme-clean-blog" target="_blank">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-github fa-stack-1x fa-inverse"></i>
                                </span>
                            </a>
                        </li>
                    

                    

                    

                    
                </ul>
                <p class="copyright text-muted">&copy; 2018 John Doe<br></p>
                <p class="copyright text-muted">Original Theme <a target="_blank" href="http://startbootstrap.com/template-overviews/clean-blog/">Clean Blog</a> from <a href="http://startbootstrap.com/" target="_blank">Start Bootstrap</a></p>
                <p class="copyright text-muted">Adapted for <a target="_blank" href="https://hexo.io/">Hexo</a> by <a href="http://www.codeblocq.com/" target="_blank">Jonathan Klughertz</a></p>
            </div>
        </div>
    </div>
</footer>


    <!-- After footer scripts -->
    
<!-- jQuery -->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

<!-- Bootstrap -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- Gallery -->
<script src="//cdnjs.cloudflare.com/ajax/libs/featherlight/1.3.5/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

<!-- Disqus Comments -->



</body>

</html>